<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>学生系统页面</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	</head>
	<style type="text/css">
          .td_1{
          	text-align: right;
          	width:50%;
          	
          }
          .table_2{
          	height: 38px;
          	background-image:url(img/广科logo_3.jpg);
          	background-size: 100% 40px;
          	width: 100%;
          }

         
        .div_3{
         	  border: 2px solid #7FFFD4;
         	width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
         }
	</style>
	
	<body>
		 <div class="div_1 "> 		 	
		 	<head>
           	<div class="div_2">
           	  <table class="table_2">
           		<tr class="tr_1">
           			<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
           		    <td><a href="#">选课中心</a>&nbsp;&nbsp;&nbsp;</td>
           			<td><a href="CourseGrade.html">查询成绩</a>&nbsp;&nbsp;&nbsp;</td>
           			<td><a href="FindLesson.html">查看课表</a> &nbsp;&nbsp;&nbsp;</td>

           			<td class="td_1"> 欢迎你 &nbsp;&nbsp;
						<button class="a_1" id="logout">退出登录</button>
           			</td>
           		</tr>
           	  </table>
           	</div>
           	<hr color="lightskyblue" />
           	    	<img src="img/广科logo.JPG" height="80px" width="100%" align="center"/>
             <hr color="lightskyblue" /> 
            
          
          </div>  
        	</head>
         
         <div class="div_3">
            <h1 align="center">选课中心</h1>
			 <h1 id="tips"></h1>
			 <table border="1" id="table_content">
				 <tr>
					 <th>课程ID</th>
					 <th>名称</th>
					 <th>教师</th>
					 <th>学分</th>
					 <th>上课时间</th>
					 <th>下课时间</th>
					 <th>地点</th>
					 <th>剩余</th>
					 <th>总数</th>
					 <th>选择</th>
				 </tr>

			 </table>
			 <button id="submit" > 提交我的选择，一旦选择不能退选</button>
         </div>


        
         
          <div>
            <hr size="3" color="lightskyblue" >
            <img src="img/尾巴.jpg" align="center" width="100%">
          </div>
		 <script>
			 $.ajax({
				 type:"POST",
				 url:"Login",
				 contentType: "application/json; charset=utf-8",
				 data:JSON.stringify({account:"1",password:"2"}),
				 success:function(data){
					 console.log(data)
					 if (data.status!="-1"){
						 $('#tips').prepend(`欢迎学生[${data.name}]来到永不死机选课系统。`)
						 getSelectData()
					 }else{
						 alert("未登录！")
					 }
				 },
				 error:function(jqXHR){
					 console.log("Error: "+jqXHR.status);
				 }
			 });
			 var s_data=[]
			 function getSelectData(){
				 $.ajax({
					 type:"POST",
					 url:"getAllSelectCourseServlet",
					 contentType: "application/json; charset=utf-8",
					 data:JSON.stringify({account:"1",password:"2"}),
					 success:function(data){
						s_data=data;
						getTableData();
					 },
					 error:function(jqXHR){
						 console.log("Error: "+jqXHR.status);
					 }
				 });
			 }
			 function getTableData(){
				 $.ajax({
					 type:"POST",
					 url:"getAllCourse",
					 contentType: "application/json; charset=utf-8",
					 data:JSON.stringify({account:"1",password:"2"}),
					 success:function(data){
						 for (var item in data){
						 	var tips=""
							 console.log(item);
						 	let temp = s_data.filter((item2)=>{
								return item2.course_id == data[item].course_id
							});
						 	console.log(temp)
							 if(temp.length==0){
								 tips=`<input type="checkbox" name="select" value="${data[item].course_id}" /> </p>`
							 }else{
								 tips="已选"
							 }
							 $('#table_content').append(`

                        <tr>
                            <td>${data[item].course_id}</td>
                            <td>${data[item].course_name}</td>
                            <td>${data[item].teacher}</td>
                            <td>${data[item].point}</td>
                            <td>${data[item].timeon}</td>
                            <td>${data[item].timeend}</td>
                            <td>${data[item].location}</td>
                            <td>未知</td>
                            <td>${data[item].limited}</td>
                            <td>${tips}</td>
                        </tr>
                     `)
						 }

					 },
					 error:function(jqXHR){
						 console.log("Error: "+jqXHR.status);
					 }
				 });
			 }
			 $("#logout").click(
			 		function () {
						$.ajax({
							type:"POST",
							url:"logout",
							contentType: "application/json; charset=utf-8",
							data:{},
							success:function(data){
								console.log(data)
								alert(data.msg)
								window.location.href="index.html"
							},
							error:function(jqXHR){
								console.log("Error: "+jqXHR.status);
							}
						});
					}
			 )
			 $('#submit').click(
					 function () {
						 var spCodesTemp = [];
						 $('input:checkbox[name=select]:checked').each(function(i){
							 spCodesTemp.push( parseInt($(this).val()) ) ;
						 });
						 console.log(spCodesTemp);
						 $.ajax({
							 type:"POST",
							 url:"SelectCourseServlet",
							 contentType: "application/json; charset=utf-8",
							 data:JSON.stringify({list:spCodesTemp}),
							 success:function(data){
								 console.log(data)
								 alert(data.msg)
								 window.location.reload()
							 },
							 error:function(jqXHR){
								 console.log("Error: "+jqXHR.status);
							 }
						 });
					 }
			 )

		 </script>
	</body>
</html>
